import styles from './index.module.css';

const VARIBALE_REGEX = /^\{\{.*\}\}$/;
export const SImage = {
  name: 's-image',
  render(h) {
    const { src } = this.$attrs;
    if (this.$env && this.$env.VUE_APP_DESIGNER && VARIBALE_REGEX.test(src)) {
      // 图片处理
      return h('div', {
        attrs: this.$attrs,
        class: styles.ideWrapper,
        listeners: this.$listeners,
      }, [
        h('svg', {
          attrs: {
            fill: 'none',
            version: '1.1',
            width: '48',
            height: '48',
            viewBox: '0 0 48 48',
          },
          class: styles.icon,
        }, [
          h('g', [
            h('path', {
              attrs: {
                d: 'M2,34L2,14C2,10.68629,4.68629,8,8,8L36,8C39.3137,8,42,10.68629,42,14L42,22.417C41.377,22.2404,40.7396,22.1191,40.0952,22.0547L40.0952,14Q40.0952,12.3037,38.8958,11.10423Q37.6963,9.90476,36,9.90476L8,9.90476Q6.3037,9.90476,5.104229999999999,11.10423Q3.90476,12.3037,3.90476,14L3.90476,34Q3.90476,35.6963,5.104229999999999,36.8958Q6.3037,38.0952,8,38.0952L29.2512,38.0952C29.6051,38.7723,30.0286,39.4107,30.5147,40L8,40C4.68629,40,2,37.3137,2,34ZM10.66348,20.326999999999998C12.1345,20.326999999999998,13.327,19.1345,13.327,17.66348C13.327,16.19248,12.1345,15,10.66348,15C9.19248,15,8,16.19248,8,17.66348C8,19.1345,9.19248,20.326999999999998,10.66348,20.326999999999998ZM28,33C28,29.4621,29.7017,26.1402,32.5728,24.073L29.8465,20.743499999999997C29.1361,19.875799999999998,27.8092,19.875799999999998,27.0988,20.743499999999997L21.3855,27.7211L17.746000000000002,23.405900000000003C17.0352,22.538600000000002,15.7084,22.5392,14.9983,23.4072L8.72702,30.8557C7.77974,32.0136,8.601479999999999,33.7521,10.09755,33.7555C15.3391,33.7673,20.5805,33.7656,25.8219,33.7639L25.8265,33.7639C26.5599,33.7636,27.2932,33.763400000000004,28.0265,33.7632C28.0088,33.5092,28,33.254599999999996,28,33Z',
                fill: '#C9CDD4',
                fillOpacity: '1',
              },
            }),
          ]),
          h('g', [
            h('path', {
              attrs: {
                d: 'M35.25891,36.84961L36.54648,35.29932L34.57507,32.9248L36.54648,30.55078L35.25891,29L32,32.9248L35.25891,36.84961ZM41.57507,35.29932L42.8626,36.84961L43.1703,36.479L46.1216,32.9248L42.8626,29L41.57507,30.55078L43.5464,32.9248L41.57507,35.29932ZM40.62722,29.546591L38.78301,29.102025L37.5862,36.303309999999996L39.43041,36.74787L40.62722,29.546591Z',
                fill: 'currentColor',
                fillOpacity: '1',
              },
            }),
          ]),
        ]),
        h('div', {
          class: styles.text,
        }, [
          h('span', {
            class: styles.textWrap,
          }, src.substring(2, src.length - 2)),
        ]),
      ]);
    }

    return h('img', {
      attrs: this.$attrs,
      listeners: this.$listeners,
    });
  },
};

export default SImage;
